<template>
  <div class="home">
    <Header />
    <Banner />
    
    <div class="main-container">
      <!-- 快速导航 -->
      <!-- <QuickNav :navItems="quickNavItems" /> -->
      
      <!-- 主要内容区 -->
      <div class="content-wrapper">
        <div class="main-content">
          <!-- 置顶文章轮播 -->
          <section class="top-articles-slider">
            <h2 class="section-title">
              <span class="title-icon"><i class="iconfont icon-top"></i></span>
              推荐内容
            </h2>
             <SimpleCarousel :articles="topArticles" />
          </section>
          
          <!-- 热门文章网格 -->
          <section class="hot-articles-grid">
            <h2 class="section-title">
              <span class="title-icon"><i class="iconfont icon-fire"></i></span>
              热门文章
              <router-link to="/articles/hot" class="more-link">更多 ></router-link>
            </h2>
            <ArticleGrid :articles="hotArticles" />
          </section>
          
          <!-- 最新文章列表 -->
          <section class="latest-articles">
            <h2 class="section-title">
              <span class="title-icon"><i class="iconfont icon-new"></i></span>
              最新文章
              <router-link to="/articles/latest" class="more-link">更多 ></router-link>
            </h2>
            <ArticleList :articles="latestArticles" />
          </section>
        </div>
        
        <div class="side-content">
          <!-- 侧边栏 -->
          <Sidebar :categories="categories" />
          
          <!-- 标签云 -->
          <TagCloud :tags="tags" />
          
          <!-- 广告位 -->
          <AdBanner position="sidebar" />
        </div>
      </div>
      
      <!-- 专题推荐 -->
      <SpecialRecommend :specials="specials" />
      
      <!-- 友情链接 -->
      <FriendLinks :links="friendLinks" />
    </div>
    
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Sidebar from '@/components/Sidebar'
import Banner from '@/components/Banner'
import QuickNav from '@/components/QuickNav'
import SimpleCarousel from '@/components/SimpleCarousel'
import ArticleGrid from '@/components/ArticleGrid'
import ArticleList from '@/components/ArticleList'
import TagCloud from '@/components/TagCloud'
import AdBanner from '@/components/AdBanner'
import SpecialRecommend from '@/components/SpecialRecommend'
import FriendLinks from '@/components/FriendLinks'
import { 
  getCategoryList, 
  getTopArticles, 
  getHotArticles,
  getLatestArticles,
  getTags,
  getSpecials,
  getFriendLinks
} from '@/api/home'

export default {
  name: 'Home',
  components: {
    Header,
    Footer,
    Sidebar,
    Banner,
    QuickNav,
    SimpleCarousel,
    ArticleGrid,
    ArticleList,
    TagCloud,
    AdBanner,
    SpecialRecommend,
    FriendLinks
  },
  data() {
    return {
      quickNavItems: [
        { icon: 'icon-news', text: '新闻资讯', link: '/news' },
        { icon: 'icon-tech', text: '技术文档', link: '/tech' },
        { icon: 'icon-resource', text: '资源下载', link: '/resources' },
        { icon: 'icon-forum', text: '交流论坛', link: '/forum' },
        { icon: 'icon-about', text: '关于我们', link: '/about' }
      ],
      categories: [],
      tags: [],
      topArticles: [],
      hotArticles: [],
      latestArticles: [],
      specials: [],
      friendLinks: []
    }
  },
  created() {
    this.fetchData()
  },
 methods: {
  async fetchData() {
    try {
      // 为每个请求添加错误处理，但仍保持并行请求
      const promises = [
        getCategoryList().then(res => res, error => {
          console.error('获取分类列表失败:', error)
          return { data: null }
        }),
        getTopArticles().then(res => res, error => {
          console.error('获取置顶文章失败:', error)
          return { data: null }
        }),
        getHotArticles().then(res => res, error => {
          console.error('获取热门文章失败:', error)
          return { data: null }
        }),
        getLatestArticles().then(res => res, error => {
          console.error('获取最新文章失败:', error)
          return { data: null }
        }),
        getTags().then(res => res, error => {
          console.error('获取标签失败:', error)
          return { data: null }
        }),
        getSpecials().then(res => res, error => {
          console.error('获取专题失败:', error)
          return { data: null }
        }),
        getFriendLinks().then(res => res, error => {
          console.error('获取友链失败:', error)
          return { data: null }
        })
      ]

      const [
        categoryRes, 
        topRes, 
        hotRes,
        latestRes,
        tagsRes,
        specialsRes,
        linksRes
      ] = await Promise.all(promises)

      this.categories = categoryRes?.data
      this.topArticles = topRes?.data
      this.hotArticles = hotRes?.data
      this.latestArticles = latestRes?.data
      this.tags = tagsRes?.data
      this.specials = specialsRes?.data
      this.friendLinks = linksRes?.data
    } catch (error) {
      console.error('获取数据过程中发生未捕获的错误:', error)
    }
  }
}
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  flex: 1;
  width: 100%;
}

.content-wrapper {
  display: flex;
  margin: 20px 0 30px;
}

.main-content {
  flex: 1;
  margin-right: 20px;
}

.side-content {
  width: 300px;
  flex-shrink: 0;
}

.section-title {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding-bottom: 12px;
  margin: 25px 0 15px;
  border-bottom: 1px solid #eaeaea;
}

.section-title .title-icon {
  color: #409EFF;
  margin-right: 8px;
}

.more-link {
  float: right;
  font-size: 14px;
  font-weight: normal;
  color: #999;
}

.more-link:hover {
  color: #409EFF;
  text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .main-content {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .side-content {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 16px;
    margin: 20px 0 10px;
  }
}
</style>